css 应用总结

css伪类

下面是自己使用过 伪类的几种场景

:last-child

利用 css:last-child,实现循环四个元素,每一个元素都有底边框,但最后一个元素没有

  1. 注意 xx:last-child 找到有共同父节点样式为xx 的元素
  2. 再选定最后一个元素,该元素必须处在最后一位,且不能有其他不相关元素

比如复杂一点的形式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<view>
<view class="xx">
<text>tt</text>
<view class='yy'>bb</view>
</view>

<view class="xx">
<text>tt</text>
<view class='yy'>bb</view>
</view>

<view class="xx">
<text>tt</text>
<view class='yy'>bb</view>
</view>
<view>

css 代码应该这样写,

1
2
3
4
5
6
7
8
.xx .yy {
border: 1rpx solid #a7a7a7;
border-width: 0 0 1rpx 0;
}

.xx:last-child .yy {
border-width: 0;
}

:nth-child(3n+2)

利用 :nth-child(3n+2) 实现一个九宫格,用于展示图片。实现效果如下,

九宫格

页面利用flex 布局,标签代码

1
2
3
4
5
6
7
8
<view class='activities'>
<view wx:for='{{starActivity}}' wx:key='postId' class='activity'>
<image class='img-activity' src='xx' mode='aspectFill'></image>
<xx></xx>
<xx></xx>
</view>

</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.activities {
width: 750rpx;
padding: 30rpx;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
}

.activity {
width: 32%;
height: 226rpx;
margin-bottom: 15rpx;
border: 1rpx solid #eee;
box-sizing: border-box;
}

.activity:nth-child(3n+2){
margin-left: 15rpx;
margin-right: 15rpx;
}

.activity .img-activity{
width: 100%;
height: 100%;
}

注意,img-activity 宽高设置为 100%,是指子元素 内容宽高==父元素 内容宽高,至于内容宽高指什么,是由box-sizing 值确定的(默认值 content-box)。

  1. box-sizing: border-box 设置的width/height == 内容宽高 + padding + border
  2. box-sizing: content-box 设置的width/height == 内容宽高

在这里 activity 的内容宽高 = wh - (padding + border), 所以img wh = 226rpx - 1rpx

css 动画

很多时候页面要添加动画,优化用户体验,可以利用css 语法支持实现。css 动画,不是瞬间变动,而是有个缓动效果,实现效果

动画图

实现效果,需要在点击后给元素添加一个样式修饰,下次点击又重现效果,类似 xx:hover。微信小程序元素(view/button)的 hover-class 刚好支持。实现如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<view class="action-sort-mount" hover-class='scale'>
<image class="user-like img-WH" src="{{isLike?'/images/like_on.svg':'/images/like.svg'}}" />
<text class='text1'>{{xx}}</text>
</view>

.scale {
animation: 0.3s myScale;
}

@keyframes myScale {
from {
transform: scale(0.5, 0.5);
}

to {
transform: scale(1, 1);
}
}

transform: translate(x, y)

利用 transform: translate(x, y) 实现一张 图片在底下一张图片(宽高未知)居中的效果,

动画图

步骤如下,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<view class='video-one-poster-icon'>
<image class='video-one-activity' src='{{xx}}' mode="aspectFill"/>
<view class='bg'></view>
<image class='video-icon' src='/images/video-icon.svg' />
</view>


.bg{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: #000;
opacity: 0.3;
}

.video-icon{
width: 100rpx;
height: 100rpx;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

善于利用 transform 改变元素大小,移动位置。

css 加边框

利用css 给元素加上边框,可以利用下面两种方式实现

  1. border 属性,设定边框宽度,假设要实现上下边框

    1
    2
    border: 1rpx solid rgba(0, 0, 0, 0.15);
    border-width: 0rpx 0rpx 1rpx 0rpx;
  2. 设置 box-shadow , 阴影矩形会往上下移动 1rpx

    1
    2
    3
    4
    5
    6
    /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
    <!-- 这个元素阴影盒子的偏移,正负含义类似 定位的left/top-->
    box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(0, 0, 0, 0.15);

    <!-- 把阴影延y 轴下移1rpx -->
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.15)

css 加蒙版

  1. 滤镜、透明度实现给元素加一层 蒙版
    1
    2
    3
    4
    5
    <!-- 透明度 -->
    opacity: 0.7

    <!-- 滤镜-->
    filter: grayscale(50%)

这就是一些关于学习css 的体会,欢迎大家给我留言,提建议,指出错误,一起讨论学习技术的感受!

-------------本文结束感谢您的阅读-------------
Donate comment here